<template>
  <view class="min-h-screen pb-safe bg-black text-[#e5e5e5] page-container-with-glow">
    <view class="p-4">
      <view class="flex flex-wrap gap-2 justify-center mb-4">
        <button
          class="px-4 py-1 rounded-lg bg-[#1f1f1f] shadow-lg text-center border border-white/10 hover:border-white/20 hover:shadow-xl hover:bg-[#2a2a2a]"
          @click="handleGet"
        >
          GET
        </button>
      </view>

      <view class="flex flex-wrap gap-2 justify-center mb-4">
        <button
          class="px-4 py-1 rounded-lg bg-[#1f1f1f] shadow-lg text-center border border-white/10 hover:border-white/20 hover:shadow-xl hover:bg-[#2a2a2a]"
          @click="handleGetPage"
        >
          分页(get)
        </button>
        <button
          class="px-4 py-1 rounded-lg bg-[#1f1f1f] shadow-lg text-center border border-white/10 hover:border-white/20 hover:shadow-xl hover:bg-[#2a2a2a]"
          @click="handleRequestPage"
        >
          分页(request)
        </button>
        <button
          class="px-4 py-1 rounded-lg bg-[#1f1f1f] shadow-lg text-center border border-white/10 hover:border-white/20 hover:shadow-xl hover:bg-[#2a2a2a]"
          @click="handleGetWithLoading"
        >
          加载中
        </button>
      </view>

      <view class="p-4 rounded-xl bg-[#1f1f1f] shadow-lg border border-white/10">
        <text class="block mb-2 text-base font-medium text-white">响应数据</text>
        <text class="block text-sm text-gray-300 whitespace-pre-wrap">
          {{ JSON.stringify(currentResponse, null, 2) }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  getPaginationList,
  getUser,
  getUserWithLoading,
  requestPaginationList,
} from '@/test/apiTest'
import { ref } from 'vue'

// 当前响应数据
const currentResponse = ref<object>()

// 基础请求示例
const handleGet = async () => {
  try {
    const response = await getUser()
    currentResponse.value = response
    uni.showToast({ title: 'GET 成功' })
  } catch (error) {
    console.error('GET 错误:', error)
    uni.showToast({ title: 'GET 失败', icon: 'error' })
  }
}

// 分页请求示例 (get)
const handleGetPage = async () => {
  try {
    const response = await getPaginationList()
    currentResponse.value = response
    uni.showToast({ title: '分页成功' })
  } catch (error) {
    console.error('分页错误:', error)
    uni.showToast({ title: '分页失败', icon: 'error' })
  }
}

// 分页请求示例 (request)
const handleRequestPage = async () => {
  try {
    const response = await requestPaginationList()
    currentResponse.value = response
    uni.showToast({ title: '分页成功' })
  } catch (error) {
    console.error('分页错误:', error)
    uni.showToast({ title: '分页失败', icon: 'error' })
  }
}

// 显示加载提示示例
const handleGetWithLoading = async () => {
  try {
    const response = await getUserWithLoading()
    currentResponse.value = response
    uni.showToast({ title: '加载成功' })
  } catch (error) {
    console.error('加载错误:', error)
    uni.showToast({ title: '加载失败', icon: 'error' })
  }
}
</script>

<style lang="scss">
.page-container-with-glow {
  position: relative;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    top: -300rpx;
    left: -300rpx;
    width: 1000rpx;
    height: 1000rpx;
    background: radial-gradient(circle, rgba(0, 220, 255, 0.1) 0%, transparent 70%);
    filter: blur(120rpx);
    z-index: 0;
    pointer-events: none;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: -400rpx;
    right: -400rpx;
    width: 1200rpx;
    height: 1200rpx;
    background: radial-gradient(circle, rgba(255, 42, 109, 0.08) 0%, transparent 70%);
    filter: blur(140rpx);
    z-index: 0;
    pointer-events: none;
  }
}
</style>
